<template>
	
	<view class="conter">
		<!-- content -->
		
		<scroll-view 
		  scroll-y="true" 
		  class="bookContent" 
		  @scrolltolower="scrolltolower" 
		  lower-threshold="50"
		  :scroll-top="redTime"
		  @scroll="PageIsScorll"
		  >
			
			<view class="txtre">
				<h3>第一章  人造人与天性</h3>
				<h6>1.1 新物种的文明</h6>
				
					<view class="" v-show="isshow">
						<text> {{ islaste }} </text>
					</view>
					
					<view class="" v-show="hiddens">
						<text> {{ chapter }} </text>
					</view>
					
				</view>
		</scroll-view>
		
			
		
			<uni-popup ref="shop" type="share">
			    <uni-popup-shop title="需要购买后阅读!" :Bookid="Bookid" ></uni-popup-shop>
			</uni-popup>
			
	</view>
</template>

<script>
	import Artilce from '@/Json.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import uniPopupShop from '@/components/uni-popup/uni-popup-shop.vue'
	// Artilce[0].chapterContent[0].content
	export default {
		props: {
			Bookid: {
				type: Number,
			},
			readTime:{
				type:Object,
			}
		},
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
			uniPopupShop
		},
		created() {
			let id = this.Bookid
			this.Artilce = this.$store.getters.getReaderBookById(id)
			console.log(this.Bookid,'我是当前的书籍id')
			this.chapter = this.Artilce[0].chapterContent[this.chapterID].content
			this.islaste = this.Artilce[0].chapterContent[this.chapterID].content
			
			// ；两个组件之间的连动效果
			this.$bus.$on('redTime',target => {
				this.redTime = target * this.proportion
			}  )
			
			// 拿到另外的time组价的引用
			console.log(this.readTime)
				
		},
		data() {
			return {
				Artilce:null,
				chapterID:0,
				chapter:null,
				hiddens:false,
				isshow:true,
				islaste:null,
				proportion:70,
				redTime:0,
			}
		},
		methods: {
			scrolltolower(value) {
				
				if( this.Artilce[0].chapterContent[this.chapterID+1].isFree ){
					this.islaste = this.Artilce[0].chapterContent[this.chapterID].content
					this.chapter =  this.Artilce[0].chapterContent[this.chapterID+1].content			
					this.chapterID += 1
					this.hiddens = !this.hiddens
					this.isShow = !this.isShow
					// 设置类型 
					this.proportion = this.proportion*2
				}else{
					this.$refs.shop.open()
				}
			},
			// 直接调用另一个组件的引用 
			PageIsScorll(value){
				let scrollTop = value.detail.scrollTop
				this.readTime.scolorListen(scrollTop)
				
			}
		},
		computed: {
			thisText() {
				let chapterID = this.chapterID
				return Artilce[0].chapterContent[0].content
			}
		},
	}
</script>
<style lang="scss" scoped>

// 中间阅读器
.conter{
	width: 100%;
	height: 83vh;
	background-color: #00BFFF;
	overflow: hidden;
	.txtre{
		margin: 10px 0 100px 0;
		padding-left: 2vh;
		padding-right: 2vh;
		margin-bottom: 10vh;
		font-size: 14px;
		
	}
	h3{
		text-align: center;
		margin-bottom: 4vh;
	}
	h6{
		
	}
	text{
		text-indent: 55px;
	}
}

.bookContent{
	height: 83vh;
}

</style>
